<template>
  <div>
    <el-dialog
      :model-value="needWorksDialog"
      title="岗位信息库"
      width="70%"
      destroy-on-close
      :close-on-click-modal="false"
      :before-close="cancel"
    >
      <!-- {{ props.existingIds }}
      {{ selectValue }} -->
      <!-- 搜索框操作 -->
      <el-form
        ref="demandRef"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item prop="jobName">
          <el-input
            v-model="searchForm.jobName"
            placeholder="请输入岗位名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="jobKeywords">
          <el-input
            v-model="searchForm.jobKeywords"
            placeholder="请输入岗位关键词"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList"></el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="needWorkersTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="selectionDemandDetails"
        show-overflow-tooltip
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="jobName" label="岗位名称" />
        <el-table-column prop="positionLevel" label="职级" />
        <el-table-column prop="salaryRange" label="薪酬范围" />
        <el-table-column prop="jobResponsibilities" label="岗位职责" />
        <el-table-column prop="qualification" label="任职条件" />
        <el-table-column prop="jobKeywords" label="岗位关键词" />
        <el-table-column prop="createPersonName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="jobStatus" label="状态" />
      </el-table>
      <Pagination
        class="pagination"
        :total="searchForm.total"
        :page="searchForm.pageNum"
        :limit="searchForm.pageSize"
        @handleSizeChange="sizeChange"
        @handleCurrentChange="currentChange"
      >
      </Pagination>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="ok">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, defineExpose } from "vue";
import { getNeedWorksList } from "@/api/recruitment/needWorkers/index.js";
import Pagination from "@/components/Pagination/pageination.vue";

const props = defineProps({
  needWorksDialog: {
    type: Boolean,
    required: true,
    default: () => {
      return false;
    },
  },
  existingIds: Array,
});

const needWorkersTable = ref(null);
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const searchForm = reactive({
  jobName: "",
  jobKeywords: "",
  pageNum: 1,
  type: 1,
  status: 0,
  total: 10,
  limit: 10,
});
const tableData = ref([]);
const selectValue = ref();

onMounted(() => {
  getList();
});

const getList = () => {
  getNeedWorksList(searchForm)
    .then(({ data = {} }) => {
      const records = data.records || [];
      const total = records.length ? data.total : 0;

      tableData.value = records;
      searchForm.total = total;
    })
    .catch((error) => {
      console.error("获取工单列表失败:", error);
      tableData.value = [];
      searchForm.total = 0;
    });
};
const selectionDemandDetails = (value) => {
  console.log(value, "valuevaluevalue");
  selectValue.value = value;
};

const ok = () => {
  proxy.$refs["demandRef"].resetFields();
  // 点击ok确认添加的时候增加判断如果数据里面selectValue的id与existingIds里面的id重复便筛选掉不进行传递，只传递为重复的id数据
  // selectValue
  // existingIds
  // 筛选掉与 existingIds 重复的 id

  proxy.$refs["demandRef"].resetFields();
  // emit("ok", filteredData);

  emit("ok", selectValue);
};

const cancel = () => {
  proxy.$refs["demandRef"].resetFields();
  emit("cancel");
};

const sizeChange = (size) => {
  console.log(size, "size");

  searchForm.pageNum = 1;
  searchForm.pageSize = size.limit;

  getList();
};
const currentChange = (page) => {
  console.log(page, "1");
  searchForm.pageNum = page.page;
  getList();
};

// 清空表格选中状态的方法
const clearTableSelection = () => {
  if (needWorkersTable.value) {
    needWorkersTable.value.clearSelection(); // 调用 el-table 的 clearSelection 方法
  }
};

// 暴露方法供父组件调用
defineExpose({
  clearTableSelection,
});

// 判断是否可以选中
// const selectableStatus = (row, index) => {
//   return !props.existingIds.includes(row.id);
// };
</script>

<style lang="scss" scoped></style>
